<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!--  引入实体类 -->
<%@page import="com.hzdl.apple.bean.Good"%>
<!-- 引入JSTL语法 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apple (中国) - 官方网站</title>

<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
	href="<%=application.getContextPath()%>/css/zhuerchong/style.css">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="">

<!-- Google Fonts -->
<link
	href='https://fonts.googleapis.com/css?family=Karla:400,400i,700%7CLato:300,400,400i,700'
	rel='stylesheet'>

<!-- Css -->
<link rel="stylesheet" href="${path }/css/bootstrap.min.css" />
<link rel="stylesheet" href="${path }/css/magnific-popup.css" />
<link rel="stylesheet" href="${path }/css/font-icons.css" />
<link rel="stylesheet" href="${path }/css/sliders.css" />
<link rel="stylesheet" href="${path }/css/style.css" />

<!-- Favicons -->
<link rel="shortcut icon" href="${path }/img/favicon.ico">
<link rel="apple-touch-icon" href="${path }/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72"
	href="${path }/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114"
	href="${path }/img/apple-touch-icon-114x114.png">

</head>
<body>
	<jsp:include page="header.jsp"></jsp:include>

	<div class="jieshao mt20 w">
		<div class="left fl">
			<img src="${path }/img/imgs/${Goods.getGoodsImg()}">
		</div>
		<div class="right fr">
			<div class="h3 ml20 mt20">${Goods.getGoodsName()}</div>
			<div class="jianjie mr40 ml20 mt10">${Goods.getGoodsInfo()}</div>
			<div class="jiage ml20 mt10">${Goods.getPrice()}元</div>
			<!-- 			<div class="ft20 ml20 mt20">选择版本</div>
			<div class="xzbb ml20 mt10">
				<div class="banben fl">
					<a>
						<span>全网通版 6GB+64GB </span>
						<span>2499元</span>
					</a>
				</div>
				<div class="banben fr">
					<a>
						<span>全网通版 6GB+128GB</span>
						<span>2899元</span>
					</a>
				</div> 
				<div class="clear"></div>
			</div>-->
			<div class="ft20 ml20 mt20">选择颜色</div>
			<div class="xzbb ml20 mt10">
				<c:forEach items="${color }" var="cc">
					<!-- 判断是否有黑色，如果是有黑色，则下面显示亮黑色的选择框 -->
					<c:if test="${cc=='黑色'}">
						<div class="banben" style="margin-left: 120px; margin-top: 15px">
							<a id="black" onclick="getColor(this)"> <span class="yuandian-black"></span> <span
								class="yanse">亮黑色</span>
							</a>
						</div>
					</c:if>
					<c:if test="${cc=='白色'}">
						<div class="banben" style="margin-left: 120px; margin-top: 15px">
							<a id="white" onclick="getColor(this)"> <span class="yuandian-white"></span> <span
								class="yanse">白色</span>
							</a>
						</div>
					</c:if>
					<c:if test="${cc=='蓝色'}">
						<div class="banben" style="margin-left: 120px; margin-top: 15px">
							<a id="blue" onclick="getColor(this)"> <span class="yuandian-blue"></span> <span
								class="yanse">蓝色</span>
							</a>
						</div>
					</c:if>
					<c:if test="${cc=='金色'}">
						<div class="banben" style="margin-left: 120px; margin-top: 15px">
							<a id="gold" onclick="getColor(this)"> <span class="yuandian-gold"></span> <span
								class="yanse" >金色</span>
							</a>
						</div>
					</c:if>
					<c:if test="${cc=='银色'}">
						<div class="banben" style="margin-left: 120px; margin-top: 15px">
							<a id="silvery" onclick="getColor(this)"> <span class="yuandian-silvery"></span> <span
								class="yanse">银色</span>
							</a>
						</div>
					</c:if>
					<c:if test="${cc=='深空灰色'}">
						<div class="banben" style="margin-left: 120px; margin-top: 15px">
							<a id="gray" onclick="getColor(this)"> <span class="yuandian-gray"></span> <span
								class="yanse">深空灰</span>
							</a>
						</div>
					</c:if>
					<c:if test="${cc=='玫瑰金色'}">
						<div class="banben" style="margin-left: 120px; margin-top: 15px">
							<a id="rosegold" onclick="getColor(this)"> <span class="yuandian-rosegold"></span> <span
								class="yanse">玫瑰金</span>
							</a>
						</div>
					</c:if>
				</c:forEach>
			</div>

			<script type="text/javascript">
				var chooseColor;
				function getColor(obj) {
					chooseColor = obj.id;
					alert(chooseColor);
				}
				
				function toCart(){
					window.open("${path}/user/cart/addCart?chooseColor="+
							chooseColor+"&GoodsID=${Goods.getGoodsID() }");
				}
			</script>
			<div class="xiadan ml20 mt20"
				style="margin-left: 180px; margin-top: 280px">
					<img src="${path}/img/imgs/tjgwc.png" onclick="toCart()" />
			</div>
		</div>
	<script type="text/javascript">
		var chooseColor ;
		function getColor(obj){
			chooseColor = obj.id;
			alert(chooseColor);
		}
	</script>
		<div class="clear"></div>
	</div>

</body>
</html>